<template>
  <div class=" p-[16px] !m-0">

    <el-row :gutter="12" justify="space-around">

      <re-col v-motion class="mb-[16px] recols" :value="24" :xs="24" :sm="24">
        <el-card shadow="never">
          <div class="flex justify-between mr-[0px] ">
            <el-text class="">
              <template #default>
                <el-text class="!text-[18px] !font-medium ">
                  待办提醒
                </el-text>
              </template>
            </el-text>

          </div>
          <el-row :gutter="0" justify="space-around">
            <re-col :value="12" :xs="24" :sm="24">
              <div class="flex  justify-start mr-[0px] mt-[20px]">
                <div class="flex-1 flex  pr-[0px] pl-[0px]  justify-start cursor-pointer" v-ripple
                  v-for="(item, index) in agency" @click="goToDo(index)">
                  <div class="flex items-center">
                    <div
                      class="w-[22px] h-[42px] text-[14px] text-center flex items-center justify-center leading-[18px] rounded-[4px]"
                      :style="{
                        color: isDark ? item.color : item.colorL,
                        background: isDark ? item.bgColor : item.bgColorL,
                        borderColor: isDark ? item.border : item.borderL,
                        borderWidth: '1px',
                      }">

                      {{ isNullOrEmpty(item.name) }}
                    </div>
                    <div class="pl-[10px] flex flex-col justify-between ">
                      <div>
                        <div class="!font-[D-DIN] !text-[22px]">
                          <ReNormalCountTo :endVal="item.count" :duration="Math.random() * 1000 + 1000" />
                        </div>
                        <!-- <el-text class="!font-[D-DIN]  !text-[22px] ">
                          {{ isNullOrEmpty( item.count ) }}
                        </el-text> -->
                        <!-- <span class="font-[D-DIN] text-[22px] leading-[26px] text-[#ffffff]">{{ isNullOrEmpty( item.count ) }}</span> -->
                        <!-- <span class="text-[14px] text-[#D6D6D6] leading-[22px] pl-[10px]">个</span> -->
                      </div>
                      <el-text class="text-index-color text-left !font-[400]">{{ isNullOrEmpty(item.text) }}</el-text>
                    </div>
                  </div>
                </div>
              </div>
            </re-col>
            <re-col :value="12" :xs="24" :sm="24">
              <div class="flex  justify-start mr-[0px] mt-[20px]">
                <div class="flex-1 flex pr-[0px] pl-[0px] justify-start cursor-pointer" v-ripple
                  v-for="(item, index) in agencyTwo" @click="goToDo(3 + index)">
                  <div class="flex items-center">
                    <div class="w-[22px] h-[42px] text-[14px] text-center  flex
                     items-center
                     justify-center
                     leading-[18px]
                     rounded-[4px]" :style="{
                      color: isDark ? item.color : item.colorL,
                      background: isDark ? item.bgColor : item.bgColorL,
                      borderColor: isDark ? item.border : item.borderL,
                      borderWidth: '1px',

                    }">
                      {{ isNullOrEmpty(item.name) }}
                    </div>
                    <div class="pl-[10px] flex flex-col justify-between ">
                      <div>
                        <div class="!font-[D-DIN] !text-[22px]">
                          <ReNormalCountTo :endVal="item.count" :duration="Math.random() * 1000 + 1000" />
                        </div>
                        <!-- <el-text  class="!font-[D-DIN]  !text-[22px] " > -->

                        <!-- </el-text> -->
                        <!-- <span class="font-[D-DIN] text-[22px] leading-[26px] text-[#ffffff]">{{ isNullOrEmpty( item.count ) }}</span> -->

                        <!-- <span class="text-[14px] text-[#D6D6D6] leading-[22px] pl-[10px]">个</span> -->
                      </div>
                      <el-text class="text-index-color text-left !font-[400]">{{ isNullOrEmpty(item.text) }}</el-text>
                    </div>

                  </div>

                </div>
              </div>
            </re-col>
          </el-row>
        </el-card>
      </re-col>
      <re-col v-motion class="mb-[16px]" :value="8" :xs="24" :sm="24">
        <el-card shadow="never" class="line-card  " :class="isDark ? 'alarmEvents' : 'alarmEventsL'">
          <div class="flex justify-between mb-[20px]">
            <!-- <span class="text-md  text-[#ffffff]">
             
            </span> -->
            <el-text class="!font-medium !text-[18px] ">
              告警事件
            </el-text>
          </div>
          <div class="flex  justify-start gap-[20px]">
            <div class="flex-1 cursor-pointer" v-ripple v-for="(item, index) in alarmEvents" :key="index"
              @click="clickalarmEvents(item)">
              <div class="!font-[D-DIN] !text-[22px] "
                :class="index == 0 ? 'text-[#E89029]' : index == 1 ? 'text-[#07C7E0]' : ''">
                <ReNormalCountTo :endVal="item.number" :duration="Math.random() * 1000 + 1000" />
              </div>

              <el-text class=" text-index-color !font-[400]">{{ isNullOrEmpty(item.name) }}</el-text>

            </div>
          </div>
        </el-card>
      </re-col>
      <re-col v-motion class="mb-[16px]" :value="8" :xs="24" :sm="24">
        <el-card shadow="never" class="line-card " :class="isDark ? 'workOrderTasks' : 'workOrderTasksL'">
          <div class="flex justify-between mb-[20px]">
            <el-text class="!font-medium !text-[18px]">
              工单任务
            </el-text>
          </div>
          <div class="flex justify-start gap-[20px]">
            <div class="flex-1 cursor-pointer" v-ripple v-for="(item, index) in workOrderTasks" :key="index"
              @click="clickworkOrderTasks(item)">


              <div class="!font-[D-DIN] !text-[22px]"
                :class="index == 0 ? 'text-[#E89029]' : index == 1 ? 'text-[#07C7E0]' : ''">
                <ReNormalCountTo :endVal="item.number" :duration="Math.random() * 1000 + 1000" />
              </div>


              <el-text class="text-index-color !font-[400]">{{ isNullOrEmpty(item.name) }}</el-text>

            </div>
          </div>
        </el-card>
      </re-col>
      <re-col v-motion class="mb-[16px]" :value="8" :xs="24" :sm="24">
        <el-card shadow="never" class="line-card " :class="isDark ? 'inspectionTasks' : 'inspectionTasksL'">
          <div class="flex justify-between mb-[20px]">
            <el-text class="!font-medium !text-[18px] ">
              巡检任务
            </el-text>
          </div>
          <div class="flex justify-between gap-[20px]">
            <div class="flex-1 cursor-pointer" v-ripple v-for="(item, index) in inspectionTasks" :key="index"
              @click="clickinspectionTasks(item)">
              <div class="!font-[D-DIN] !text-[22px]"
                :class="index == 0 ? 'text-[#E89029]' : index == 1 ? 'text-[#07C7E0]' : ''">
                <ReNormalCountTo :endVal="item.number" :duration="Math.random() * 1000 + 1000" />
              </div>
              <el-text class="text-index-color !font-[400]">{{ isNullOrEmpty(item.name) }}</el-text>

            </div>
          </div>
        </el-card>
      </re-col>
      <re-col v-motion class="mb-[16px] recols" :value="24" :xs="24">
        <el-card shadow="never">
          <div class="flex justify-between mr-[0px] ">
            <el-text class="!font-medium !text-[18px] cursor-pointer ">
              概览统计
              <!-- <div class="text-[20px] font-medium cursor-pointer text-[#ffffff]"></div> -->
            </el-text>
          </div>
          <el-row :gutter="0" justify="space-around">
            <re-col :value="12" :xs="24" :sm="24" class="">
              <div class="flex  justify-start mr-[0px] mt-[20px] ">
                <div class="flex-1 flex  pr-[0px] pl-[0px]  justify-start" v-for="(item, index) in statisticsTwo"
                  @click="clickstatistics(item, index, 1)" v-ripple="item.text != '项目数量'">
                  <div class="flex" :class="item.text != '项目数量' ? 'cursor-pointer' : ''">
                    <div class="pt-[3px]">
                      <el-image class="w-[26px] h-[26px] rounded-[50%]" :src="item.img" />
                    </div>
                    <div class="pl-[10px] flex flex-col justify-between ">
                      <div>
                        <div class="!font-[D-DIN] !text-[22px]">
                          <ReNormalCountTo :endVal="item.count" :duration="Math.random() * 1000 + 1000" />
                        </div>
                        <!-- <el-text class="!font-[D-DIN] !text-[22px] ">
                          {{ isNullOrEmpty( item.count ) }}
                        </el-text> -->
                        <!-- <span class="font-[D-DIN] text-[22px] leading-[26px] text-[#ffffff]">{{ isNullOrEmpty( item.count ) }}</span> -->
                        <!-- <span class="text-[14px] leading-[22px] pl-[10px] text-[#D6D6D6]">个</span> -->
                      </div>

                      <el-text class="text-index-color !font-[400]">{{ isNullOrEmpty(item.text) }}</el-text>
                    </div>
                  </div>
                </div>
              </div>
            </re-col>
            <re-col :value="12" :xs="24" :sm="24">
              <div class="flex  justify-start mr-[0px] mt-[20px] cursor-pointer">
                <div class="flex-1 flex pr-[0px] pl-[0px] justify-start" v-ripple v-for="(item, index) in statistics"
                  @click="clickstatistics(item, index, 2)">
                  <div class="flex ">
                    <div class="pt-[3px]">
                      <img :src="item.img" :lazy='true' class="w-[26px] h-[26px] rounded-[50%]"></img>
                    </div>
                    <div class="pl-[10px] flex flex-col justify-between ">
                      <div>
                        <div class="!font-[D-DIN] !text-[22px]">
                          <ReNormalCountTo :endVal="item.count" :duration="Math.random() * 1000 + 1000" />
                        </div>
                        <!-- <el-text class="!font-[D-DIN] !text-[22px] ">
                          {{ isNullOrEmpty( item.count ) }}
                        </el-text> -->
                        <!-- <span class="font-[D-DIN] text-[22px] leading-[26px] text-[#ffffff]">{{ isNullOrEmpty( item.count ) }}</span> -->
                        <!-- <span class="text-[14px] leading-[22px] pl-[10px] text-[#D6D6D6]">个</span> -->
                      </div>
                      <el-text class="text-index-color !font-[400]">{{ isNullOrEmpty(item.text) }}</el-text>
                    </div>

                  </div>

                </div>

              </div>
            </re-col>
          </el-row>
        </el-card>
      </re-col>

      <!-- 统计图 -->
      <re-col v-motion class="mb-[16px] " :value="8" :xs="24" :sm="24" :initial="{
        opacity: 0,
        y: 100
      }" :enter="{
        opacity: 1,
        y: 0,
        transition: {
          delay: 400
        }
      }">
        <el-card class="line-card h-[330px]" shadow="never">
          <div class="flex justify-between">
            <span class="text-md font-medium text-[18px]">告警统计</span>
            <!-- <Segmented v-model="curWeek" :options="optionsBasis" /> -->
          </div>
          <div class="flex justify-between items-start mt-3">
            <lineChart :data="copylineChartData" />
          </div>
        </el-card>
      </re-col>

      <re-col v-motion class="mb-[16px] " :value="8" :xs="24" :sm="24" :initial="{
        opacity: 0,
        y: 100
      }" :enter="{
        opacity: 1,
        y: 0,
        transition: {
          delay: 480
        }
      }">
        <el-card class="bar-card h-[330px] " shadow="never">
          <div class="flex justify-between">
            <span class="text-md font-medium text-[18px]">工单统计</span>
            <!-- <Segmented v-model="curWeek" :options="optionsBasis" /> -->
          </div>
          <div class="flex justify-between items-start mt-3">
            <barChart :data="copybarChartData" />
          </div>
        </el-card>
      </re-col>
      <re-col v-motion class="mb-[16px] " :value="8" :xs="24" :sm="24" :initial="{
        opacity: 0,
        y: 100
      }" :enter="{
        opacity: 1,
        y: 0,
        transition: {
          delay: 480
        }
      }">
        <el-card class="doublebar-card h-[330px]" shadow="never">
          <div class="flex justify-between">
            <span class="text-md font-medium text-[18px]">巡检统计</span>
            <!-- <Segmented v-model="curWeek" :options="optionsBasis" /> -->
          </div>
          <div class="flex justify-between items-start mt-3">
            <doubleBarChart :data="copydoubleBarChart" />
          </div>
        </el-card>
      </re-col>

      <re-col v-motion class="mb-[16px] " :value="8" :xs="24" :sm="24" :initial="{
        opacity: 0,
        y: 100
      }" :enter="{
        opacity: 1,
        y: 0,
        transition: {
          delay: 480
        }
      }">
        <el-card class="singlebar-card h-[330px]" shadow="never">
          <div class="flex justify-between">
            <span class="text-md font-medium text-[18px]">设备统计</span>
            <!-- <Segmented v-model="curWeek" :options="optionsBasis" /> -->
          </div>
          <div class="flex justify-between items-start mt-3">
            <singleBarChart :data="copysingleBarChartData" />
          </div>
        </el-card>
      </re-col>

      <re-col v-motion class="mb-[16px] " :value="8" :xs="24" :sm="24" :initial="{
        opacity: 0,
        y: 100
      }" :enter="{
        opacity: 1,
        y: 0,
        transition: {
          delay: 480
        }
      }">
        <el-card class="pie-card h-[330px]" shadow="never">
          <div class="flex justify-between">
            <span class="text-md font-medium text-[18px]">设施统计</span>
            <!-- <Segmented v-model="curWeek" :options="optionsBasis" /> -->
          </div>
          <div class="flex justify-between items-start mt-3">
            <pieChart :data="copypieChartDataES" />
          </div>
        </el-card>
      </re-col>

      <re-col v-motion class="mb-[16px] " :value="8" :xs="24" :sm="24" :initial="{
        opacity: 0,
        y: 100
      }" :enter="{
        opacity: 1,
        y: 0,
        transition: {
          delay: 480
        }
      }">
        <el-card class="pie-card h-[330px]" shadow="never">
          <div class="flex justify-between">
            <span class="text-md font-medium text-[18px]">系统设备统计</span>
            <!-- <Segmented v-model="curWeek" :options="optionsBasis" /> -->
          </div>
          <div class="flex justify-between items-start mt-3">
            <pieChart :data="copypieChartData" />
          </div>
        </el-card>
      </re-col>

    </el-row>

  </div>
</template>
<script setup lang="ts">
import { isNullOrEmpty } from '@/utils/functions'
import { useRouter } from "vue-router";
import ReCol from "@/components/ReCol";
import { useDark, cloneDeep } from "./utils";
import { barChart, lineChart, pieChart, doubleBarChart, singleBarChart } from "./components/chart";
import { barChartData, pieChartData, lineChartData, doubleBarChartDatas, singleBarChartData } from "./data";  //数据来源
import home1 from "../../assets/home/homeIcon1@2x.png";
import home2 from "../../assets/home/homeIcon2@2x.png";
import home3 from "../../assets/home/homeIcon3@2x.png";
import home4 from "../../assets/home/header-4@2x.png";
import home5 from "../../assets/home/homeIcon5@2x.png";
import home6 from "../../assets/home/header-6@2x.png";
import { ReNormalCountTo } from '@/components/ReCountTo/index'
import { getProjectAlarm } from '@/api/manage/index'
import { isEmpty } from "@pureadmin/utils";
const router = useRouter();
defineOptions({
  name: "Welcome"
});
const copylineChartData = ref(cloneDeep(lineChartData))
const copybarChartData = ref(cloneDeep(barChartData))
const copydoubleBarChart = ref(cloneDeep(doubleBarChartDatas))
const copysingleBarChartData = ref(cloneDeep(singleBarChartData))
const copypieChartData = ref(cloneDeep(pieChartData))
const copypieChartDataES = ref(cloneDeep(pieChartData))
onMounted(() => {
  getProjectAlarm().then(res => {  //2.14.6 告警统计折线图
    //获取代办提醒
    agency.value[0].count = res.result?.expireDeviceNum
    agency.value[1].count = res.result?.flowCardExpire
    agency.value[2].count = res.result?.facilitExpire
    agencyTwo.value[0].count = res.result?.facilitMainte
    agencyTwo.value[1].count = res.result?.facilitScrap
    agencyTwo.value[2].count = res.result?.mainteExpireCount
    //获取告警事件
    alarmEvents.value[0].number = res.result?.alarm.baseInfo?.alarmWait
    alarmEvents.value[1].number = res.result?.alarm.baseInfo?.alarmDealing
    alarmEvents.value[2].number = res.result?.alarm.baseInfo?.alarmTotal
    //工单任务
    workOrderTasks.value[0].number = res.result?.workOrder.baseInfo?.workOrderDealing
    workOrderTasks.value[1].number = res.result?.workOrder.baseInfo?.workOrderTotal
    // 巡检任务
    inspectionTasks.value[0].number = res.result?.inspect.baseInfo?.inspectWait
    inspectionTasks.value[1].number = res.result?.inspect.baseInfo?.inspecting
    inspectionTasks.value[2].number = res.result?.inspect.baseInfo?.inspectTotal
    //概览统计
    statisticsTwo.value[0].count = res.result?.projectNum
    statisticsTwo.value[1].count = res.result?.deviceNum
    statisticsTwo.value[2].count = res.result?.errorNum
    statistics.value[0].count = res.result?.offlineNum
    statistics.value[1].count = res.result?.alarmNum
    statistics.value[2].count = res.result?.normalNum
    //告警统计折线图
    copylineChartData.value = cloneDeep(lineChartData)
    copylineChartData.value.xAxis.push(...res.result?.alarm.alarmMonth.xAxis)
    copylineChartData.value.data.push(...res.result?.alarm.alarmMonth.data.map((item, index) => {
      const colors = ["#07C7E0", "#5069DA", "#EEBC66"];
      return {
        name: item.name,
        value: item.value,
        color: colors[index],
      }
    }))


    // 工单统计层叠柱状图
    copybarChartData.value = cloneDeep(barChartData)
    if (!isEmpty(res.result?.workOrder)) {
      copybarChartData.value.xAxis.push(...res.result?.workOrder.workOrderMonth.xAxis)
      copybarChartData.value.data.push(...res.result?.workOrder.workOrderMonth.data.map((item, index) => {
        const colors = ["#07C7E0", "#5069DA", "#EEBC66", "#AFA9C7"];
        return {
          name: item.name,
          value: item.value,
          color: colors[index],
        }
      }))
    }
    //巡检统计
    copydoubleBarChart.value = cloneDeep(doubleBarChartDatas)
    copydoubleBarChart.value.xAxis.push(...res.result?.inspect.inspectMonth.xAxis)
    // console.log("dscsdf阿萨德", copydoubleBarChart.value.xAxis);

    copydoubleBarChart.value.data.push(...res.result?.inspect.inspectMonth.data.map((item, index) => {
      const colors = ["#07C7E0", "#5069DA",'#EEBC66'];
      return {
        name: item.name,
        value: item.value,
        color: colors[index],
      }
    }))


    //设施统计
    copypieChartDataES.value = cloneDeep(pieChartData)
    if (!isEmpty(res.result?.facilit)) {
      copypieChartDataES.value.data.push(...res.result?.facilit.data.map((item, index) => {
        return {
          name: item.groupName,
          value: item.facilitNum,

        }
      }))
    }

    //系统统计
    copypieChartData.value = cloneDeep(pieChartData)
    if (!isEmpty(res.result?.systematic)) {
      copypieChartData.value.data.push(...res.result?.systematic.data.map((item, index) => {
        return {
          name: item.SystematicName,
          value: item.deviceNum,

        }
      }))
    }


    //设备统计
    copysingleBarChartData.value = cloneDeep(singleBarChartData)


    if (!isEmpty(res.result?.device)) {

      copysingleBarChartData.value.xAxis?.push(...res.result?.device?.xAxis)

      copysingleBarChartData.value.data?.push(...res.result?.device?.data?.map((item, index) => {

        return {
          name: item.name,
          value: item.value,

        }
      }))
    }
  })
})
const clickalarmEvents = (row) => { //告警统计
  // router.push("/alarm-management/alarm-log")
  console.log("row", row);

  if (row.confirm) {
    router.push(
      `/alarm-management/alarm-log?confirm=${row.confirm}`
    );
  } else if (row.dealStatus) {
    router.push(
      `/alarm-management/alarm-log?dealStatus=${row.dealStatus}`
    );
  } else {
    router.push("/alarm-management/alarm-log")
  }


}
const clickworkOrderTasks = (row) => {
  // router.push("/work-management/work-managements")
  if (row.workOrderStatus) {
    router.push(
      `/work-management/work-managements?workOrderStatus=${row.workOrderStatus}`
    );
  }
  else {
    router.push("/work-management/work-managements")
  }
}

const clickinspectionTasks = (row) => {
  // router.push("/daily-inspection/Inspection-plan")
  if (row.missionStatus) {
    router.push(
      `/Inspection-tasks/Inspection-tasks?missionStatus=${row.missionStatus}`
    );
  }
  else {
    router.push("/Inspection-tasks/Inspection-tasks")
  }
}

const goToDo = (index) => {
  switch (index) {
    case 0:
      router.push('/device-management/device-management?isWillExpired=1')
      break;
    case 1:
      router.push('/device-management/traffic-card?isWillExpired=1')
      break;
    case 2:
      router.push('/operate/project-management/project-management/facility-management?isWillExpired=1')
      break;
    case 3:
      router.push('/operate/project-management/project-management/facility-management?isWillExpired=2')
      break;
    case 4:
      router.push('/operate/project-management/project-management/facility-management?isWillExpired=3')
      break;
    case 5:
      router.push('/maintenance/contract?isWillExpired=1')
      break;
    default:
      break;
  }
}

const clickstatistics = (row, index, e) => {
  if (e == 1 && index == 0) {
    return
  } else {
    if (row.commStatus) {   //设备状态
      router.push(
        `/device-management/device-management?commStatus=${row.commStatus}`
      );
    }
    else {
      router.push("/device-management/device-management")
    }
  }
  // router.push("/device-management/device-management")

}
const { isDark } = useDark();
watch(() => isDark.value, () => {
  console.log(isDark.value)
})
let curWeek = ref(1); // 0上周、1本周
const agencyTwo = ref([
  {
    name: '维保',
    count: 0,
    text: '即将维保的设施',
    color: '#4A5FD5',
    bgColor: '#010940',
    border: '#4A5FD5',
    colorL: '#5B73FB',
    bgColorL: '#E5E9FF',
    borderL: '#5B73FB',
    borderWidth: '1px',
    index: 3
  },
  {
    name: '报废',
    count: 0,
    text: '即将报废的设施',
    color: '#FF4848',
    bgColor: '#400303',
    border: '#FF4848;',
    borderWidth: '1px',
    colorL: '#FF4848',
    bgColorL: '#FFE9E9',
    borderL: '#FF4848',
    index: 4
  },
  {
    name: '到期',
    count: 0,
    text: '即将到期的维保合同',
    color: '#E89029',
    bgColor: '#442501',
    border: '#E89029',
    borderWidth: '1px',
    colorL: '#F09326',
    bgColorL: '#FFF2E2',
    borderL: '#E89029',

    index: 5
  }
])
const agency = ref([  //代办提醒
  {
    name: '到期',
    count: 0,
    text: '即将到期的设备',
    color: '#E89029',
    bgColor: '#442501',
    border: '#E89029',
    colorL: '#F09326',
    bgColorL: '#FFF2E2',
    borderL: '#E89029',
    borderWidth: '1px',
    index: 0
  },
  {
    name: '续费',
    count: 0,
    text: '即将续费的流量卡',
    color: '#07C7E0',
    bgColor: '#063339',
    border: '#07C7E0',
    borderWidth: '1px',
    colorL: '#07C7E0',
    bgColorL: '#DCFBFF',
    borderL: '#07C7E0',
    index: 1
  },
  {
    name: '过期',
    count: 0,
    text: '即将过期的设施',
    color: '#AAABAB',
    bgColor: '#665B5B',
    border: '#AAABAB',
    borderWidth: '1px',
    colorL: '#AAABAB',
    bgColorL: '#F0F0F0',
    borderL: '#AAABAB',
    index: 2
  },
])

const statistics = ref([
  {
    count: 0,
    text: '离线设备',
    img: home4,
    index: 0,
    commStatus: 2
  },
  {
    count: 0,
    text: '报警设备',
    img: home5,
    index: 1,
    commStatus: 4
  },
  {
    count: 0,
    text: '正常设备',
    img: home6,
    index: 2,
    commStatus: 1
  },
])
const statisticsTwo = ref([
  {
    count: 0,
    text: '项目数量',
    img: home1,
    index: 0
  },
  {
    count: 0,
    text: '设备总数',
    img: home2,
    index: 1
  },
  {
    count: 0,
    text: '故障设备',
    img: home3,
    index: 2,
    commStatus: 3
  },
])

//告警事件
const alarmEvents = ref([
  {
    name: '待确认',
    number: 0,
    bgColor: 'linear-gradient(180deg, #093339 0%, var(--bg-2) 100%)',
    color: '#E89029',
    confirm: '-1'
  },
  {
    name: '处理中',
    number: 0,
    color: '#07C7E0',
    dealStatus: 2
  },
  {
    name: '累计',
    number: 0,
    // color:'#ffffff'
  }
])
//工单任务
const workOrderTasks = ref([

  {
    name: '处理中',
    number: 0,
    color: '#07C7E0',
    workOrderStatus: 2
  },
  {
    name: '累计',
    number: 0,
    // color:'#ffffff'
  }
])
//巡检任务
const inspectionTasks = ref([
  {
    name: '待巡检',
    number: 0,
    color: '#E89029',
    missionStatus: 1
  },
  {
    name: '巡检中',
    number: 0,
    color: '#07C7E0',
    missionStatus: 2
  },
  {
    name: '累计',
    number: 0,
    // color:'#ffffff'
  }
])



const getUrls = (url) => {
  return new URL(url, import.meta.url).href
}
</script>


<style lang="scss" scoped>
.alarmEvents {
  background: linear-gradient(180deg, #093339 0%, var(--bg-2) 100%)
}

.workOrderTasks {
  background: linear-gradient(180deg, #281B04 0%, var(--bg-2) 100%)
}

.inspectionTasks {
  background: linear-gradient(180deg, #0C123E 0%, var(--bg-2) 100%)
}

.alarmEventsL {
  background: linear-gradient(180deg, #EBFDFF 0%, #FFFFFF 100%);
}

.workOrderTasksL {
  background: linear-gradient(180deg, #FFF5E0 0%, #FFFFFF 100%);
}

.inspectionTasksL {
  background: linear-gradient(180deg, #E4E7FF 0%, #FFFFFF 100%);
}

:deep(.el-card) {
  --el-card-border-color: none;

  /* 解决概率进度条宽度 */
  .el-progress--line {
    width: 85%;
  }

  /* 解决概率进度条字体大小 */
  .el-progress-bar__innerText {
    font-size: 15px;
  }

  /* 隐藏 el-scrollbar 滚动条 */
  .el-scrollbar__bar {
    display: none;
  }

  /* el-timeline 每一项上下、左右边距 */
  .el-timeline-item {
    margin: 0 6px;
  }
}

// .main-content {
//   margin: 20px 20px 0 !important;
// }</style>
